<template>
    <div id="adopter">
        <div class="adopter-main">
            <ul class="adopter-m-ul">
                <li v-for="(item, index) in dataList" :key="index">
                    <el-card class="adopter-m-ul-box-card" :body-style="{ padding: '0px' }">
                        <div slot="header" class="adopter-m-ul-box-card-header">
                            <div class="adopter-m-ul-box-card-header-img">
                                <img :src="item.userPortraitSrc">
                            </div>
                            <span class="adopter-m-ul-box-card-header-name">{{ item.userName }}</span>
                            <div class="adopter-m-ul-box-card-header-address">
                                <div>时间：{{ item.issueTime | dateFormat('yy-mm-dd') }}</div>
                            </div>
                        </div>
                        <div class="adopter-m-ul-box-card-body">
                            <div style="margin: 5px;">
                                <span>领养要求：</span>
                                <el-tag :key="tag" v-for="tag in JSON.parse(item.demand)" :disable-transitions="false">
                                    {{ tag }}
                                </el-tag>
                            </div>
                            <div style="margin: 5px;">
                                <span>宠物特点：</span>
                                <el-tag :key="tag" v-for="tag in JSON.parse(item.adopterCharacter)"
                                    :disable-transitions="false">
                                    {{ tag }}
                                </el-tag>
                            </div>
                            <div class="adopter-m-ul-box-card-body-introduce">{{ item.story }}</div>
                            <div class="adopter-m-ul-box-card-body-img">
                                <img :src="item.petPortraitSrc">
                            </div>
                        </div>
                    </el-card>
                </li>
            </ul>
        </div>
        <el-tooltip effect="light" content="发布我领养帖" placement="top">
            <i class="el-icon-plus adopter-add" @click="dialogShowed = true"></i>
        </el-tooltip>
        <!-- 抽屉添加领养帖日记 -->
        <el-dialog ref="dialog" :visible.sync="dialogShowed" v-if="dialogShowed" size="20%" :before-close="handleClose"
            class="dialog" destroy-on-close>
            <el-form ref="form" label-position="right" label-width="80px" :model="formData"
                class="huily-flex-container-column drawer-form">
                <el-form-item class="el-form-item-img">
                    <div class="box-img">
                        <img :src="petPortraitSrc">
                    </div>
                </el-form-item>
                <el-form-item label="宠物" prop="petID">
                    <el-select v-model="formData.petID">
                        <el-option v-for="item in petList" :key="item.id" :label="item.petName" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="领养要求" prop="address">
                    <el-tag :key="tag" v-for="tag in demandTags" closable :disable-transitions="false"
                        @close="handleCloseDemandTags(tag, true)">
                        {{ tag }}
                    </el-tag>
                    <el-input class="input-new-tag" v-if="inpuDemandVisible" v-model="inputValueDemand"
                        ref="saveTagInputDemand" size="small" @keyup.enter.native="handleInputConfirm(true)"
                        @blur="handleInputConfirm(true)">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
                </el-form-item>
                <el-form-item label="宠物性格" prop="address">
                    <el-tag :key="tag" v-for="tag in characterTags" closable :disable-transitions="false"
                        @close="handleCloseDemandTags(tag, false)">
                        {{ tag }}
                    </el-tag>
                    <el-input class="input-new-tag" v-if="inpuCharacterVisible" v-model="inputValueCharacter"
                        ref="saveTagInputCharacter" size="small" @keyup.enter.native="handleInputConfirm(false)"
                        @blur="handleInputConfirm(false)">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput(false)">+ New Tag</el-button>
                </el-form-item>
                <el-form-item label="时间" prop="issueTime">
                    <el-date-picker v-model="formData.issueTime" type="datetime"></el-date-picker>
                </el-form-item>
                <el-form-item label="它的故事" prop="story">
                    <el-input v-model="formData.story" type="textarea" maxlength="500" show-word-limit></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'adopter',
        data() {
            return {
                dialogShowed: false,
                userinfo: '',
                dataList: [],
                petList: [],
                action: this.$baseURL + '/upload',
                userinfo: JSON.parse(window.localStorage.getItem('HuiLY')).userinfo,
                formData: {
                    petID: '',
                    issueTime: new Date()
                },
                demandTags: [],
                characterTags: [],
                petPortraitSrc: '',
                inpuDemandVisible: false,
                inpuCharacterVisible: false,
                inputValueDemand: '',
                inputValueCharacter: ''
            }
        },
        watch: {
            drawerShowed: {
                handler(newVal) {
                    if (!newVal) {
                        this.$refs.drawer.$destroy()
                    }
                }
            },
            "formData.petID"(newVal) {
                let temp = this.petList.filter(item => item.id == newVal)
                this.petPortraitSrc = temp[0].portraitSrc
            }
        },
        methods: {
            GetPetDataList() {
                this.$GET('/pet/getOnlyOwner', { ownerID: this.userinfo.id })
                    .then((response) => {
                        let data = response.data.data
                        this.petList = data
                    }).catch((response) => {
                        console.error(response);
                    })
            },
            GetDataList() {
                let loading = this.$loading({
                    target: '#adopter',
                    text: '加载领养帖中'
                })
                this.$GET('/adopter/getAdopter', { onlyIsPassed: true })
                    .then((response) => {
                        this.dataList = response.data.data
                        this.$nextTick(() => {
                            loading.close()
                        })
                    }).catch(_ => loading.close())
            },
            handleClose(done) {
                this.formData = {
                    issueTime: new Date()
                }
                done()
            },
            submitForm() {
                let loading = this.$loading({
                    target: '#adopter',
                    text: '领养帖发布中'
                })
                this.formData.ownerID = this.userinfo.id
                this.formData.demand = JSON.stringify(this.demandTags)
                this.formData.adopterCharacter = JSON.stringify(this.characterTags)
                this.$POST('/adopter/insertAdopter', this.formData)
                    .then((response) => {
                        this.$message({
                            duration: 1000,
                            message: response.data.msg,
                            type: 'success'
                        })
                        this.$nextTick(() => {
                            loading.close()
                            this.dialogShowed = false
                            this.GetDataList()
                        })
                        this.formData = {
                            issueTime: new Date()
                        }
                    }).catch((response) => {
                        this.$message({
                            type: 'error',
                            message: response.data?.msg
                        })
                        loading.close()
                    })
            },
            /**
             * 
             * @param {} tag 
             * @param {boolean} type true:寄养要求  false：性格特点
             */
            handleCloseDemandTags(tag, type = false) {
                if (type) {
                    this.demandTags.splice(this.demandTags.indexOf(tag), 1);
                } else this.characterTags.splice(this.characterTags.indexOf(tag), 1);
            },
            showInput(type = false) {
                if (type) {
                    this.inpuDemandVisible = true;
                    this.$nextTick(_ => {
                        this.$refs.saveTagInputDemand.$refs.input.focus();
                    });
                } else {
                    this.inpuCharacterVisible = true;
                    this.$nextTick(_ => {
                        this.$refs.saveTagInputCharacter.$refs.input.focus();
                    });
                }
            },

            handleInputConfirm(type = false) {
                if (type) {
                    let inputValueDemand = this.inputValueDemand;
                    if (inputValueDemand) {
                        this.demandTags.push(inputValueDemand);
                    }
                    this.inpuDemandVisible = false;
                    this.inputValueDemand = '';
                } else {
                    let inputValueCharacter = this.inputValueCharacter;
                    if (inputValueCharacter) {
                        this.characterTags.push(inputValueCharacter);
                    }
                    this.inpuCharacterVisible = false;
                    this.inputValueCharacter = '';
                }
            }
        },
        mounted() {
            this.GetPetDataList()
            this.GetDataList()
        },
        activated() {
            this.GetPetDataList()
            this.GetDataList()
        },
    }
</script>

<style scoped lang="less">
    #adopter {
        width: 100%;
        display: flex;

        .adopter-main {
            .adopter-m-ul {
                display: flex;
                flex-direction: row;
                justify-content: center;
                flex-wrap: wrap;

                &-box-card {
                    width: 600px;
                    height: 750px;
                    padding: 10px;
                    margin: 10px 50px;
                    box-shadow: 10px 10px 5px var(--main-box-shadow-color);

                    &:hover {
                        border: 1px solid rgb(250, 220, 100);
                        box-shadow: 5px 5px 5px rgb(250, 220, 100);
                    }

                    .adopter-m-ul-box-card-header {
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;

                        &-img {
                            display: flex;
                            width: 65px;
                            height: 65px;
                            border-radius: 50%;
                            border: 1px solid var(--main-bg-color);
                            overflow: hidden;
                            justify-content: center;
                            align-items: center;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: center;
                            }
                        }

                        .adopter-m-ul-box-card-header-name {
                            display: inline-block;
                            vertical-align: middle; // 对齐方式
                            text-align: center;
                            flex: 1;
                        }

                        .adopter-m-ul-box-card-header-address {
                            display: inline;
                            vertical-align: middle; // 对齐方式
                            margin-left: 30px;
                            align-items: flex-end;
                        }
                    }

                    &-body {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        flex: 1;
                        align-items: center;

                        .adopter-m-ul-box-card-body-introduce {
                            display: block;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            width: 350px;
                            height: 100px;
                            line-height: 100px;
                        }

                        &-img {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            width: 350px;
                            max-height: 100%;
                            flex: 1;
                            border-radius: 15px;
                            overflow: hidden;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: center;
                            }
                        }
                    }
                }
            }

        }

        .adopter-add {
            position: fixed;
            bottom: 10%;
            right: 5%;
            font-size: 50px;
            // color: rgb(20, 40, 150);
            color: var(--mian-font-color);
            background-color: rgb(250, 220, 100);
            border-radius: 50%;
            display: inline-block;

            &:hover {
                transform: rotate(0.5turn) scale(1.1);
                transition: all .5s;
            }
        }

        .dialog {
            .drawer-form {
                align-items: start;
                justify-content: flex-start;

                .el-form-item-img {
                    // align-self: center;
                    margin-top: 20px;

                    .box-img {
                        display: flex;
                        width: 65px;
                        height: 65px;
                        border: 1px solid var(--main-bg-color);
                        overflow: hidden;
                        justify-content: center;
                        align-items: center;
                        float: left;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            object-position: center;
                        }
                    }
                }
            }
        }
    }
</style>

<style scoped>
    .el-tag+.el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>